<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="reset.css">
    <style>
        .content-con .title {
            font-size: 18px;
            color: #434343;
            margin-bottom: 66px;
            cursor: pointer;
            width: 295px;
        }
        
        .content-con .title span:nth-of-type(1) {
            width: 20px;
            height: 14px;
            display: inline-block;
            background: url(img/spritecow.png) no-repeat -30px -5px;
            cursor: pointer;
        }
        
        .contentR {
            width: 85%;
            /* background: palevioletred; */
            /* height: 1000px; */
            float: left;
        }
        
        .content-con {
            width: 92%;
            margin: 0 auto;
        }
        
        .content {
            /* height: 1500px; */
            flex: 1;
        }
        
        .cartright {
            width: 387px;
            /* height: 502px; */
            background: #444;
            position: absolute;
            right: 30px;
            top: 179px;
            box-sizing: border-box;
            padding: 30px 25px;
            border-radius: 3px;
        }
        
        .carttitle {
            width: 92%;
            position: relative;
        }
        
        .cartright h3 {
            color: white;
            height: 48px;
            border-bottom: 1px solid #9c9c9c;
            margin-bottom: 10px;
        }
        
        .paydetail {
            height: 74px;
            border-top: 1px solid #4c4c4c;
            border-bottom: 1px solid #4c4c4c;
        }
        
        .ordertext {
            height: 189px;
        }
        
        .cartright p {
            color: white;
            margin-top: 10px;
        }
        
        .paydetail .price {
            float: right;
        }
        
        .cartright h2 {
            color: white;
        }
        
        .counttotal {
            float: right;
        }
        
        .order {
            width: 100%;
            height: 53px;
            background: #fff;
            text-align: center;
            line-height: 53px;
            margin-top: 40px;
            border: none;
            border-radius: 5px;
            font-size: 18px;
        }
        
        .cartimg {
            width: 160px;
            height: 129px;
            float: left;
            cursor: pointer;
        }
        
        .cartimg img {
            width: 100%;
            height: 100%;
        }
        
        .carttext {
            width: 431px;
            height: 129px;
            /* background: chocolate; */
            float: right;
            margin-top: 10px;
            padding: 16px 23px 0 0;
            box-sizing: border-box;
            cursor: pointer;
        }
        
        .delete,
        .editor {
            font-style: normal;
            text-decoration: underline;
            color: #444;
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;
        }
        
        .ordermessage {
            width: 1000px;
            height: 338px;
            border: 1px solid #c9c9c9;
        }
        
        .cartleft {
            height: 800px;
        }
        
        .ordermessage .ordertitle {
            width: 1000px;
            height: 68px;
            background-color: #d8d8d8;
            font-size: 23px;
            line-height: 68px;
            padding-left: 28px;
            box-sizing: border-box;
            border-bottom: 1px solid #c9c9c9;
        }
        
        .ordercontent {
            width: 1000px;
            height: 271px;
            /* background-color: burlywood; */
            padding: 0 26px;
            box-sizing: border-box;
        }
        
        #consignee,
        #phonenumber {
            width: 446px;
            height: 43px;
            border: 1px solid #b0b0b0;
            color: 7d7d7d;
            margin-bottom: 30px;
            padding-left: 10px;
            box-sizing: border-box;
        }
        
        #consignee {
            margin-right: 42px;
        }
        
        #province,
        #area,
        #city {
            width: 285px;
            height: 43px;
            border: 1px solid #b0b0b0;
            color: #b0b0b0;
        }
        
        #province,
        #city {
            margin-right: 40px;
        }
        
        #orderaddress {
            width: 943px;
            height: 43px;
            border: 1px solid #b0b0b0;
            margin-top: 30px;
            margin-bottom: 10px;
            padding-left: 10px;
            box-sizing: border-box;
        }
        
        .cancel,
        .save {
            float: right;
            cursor: pointer;
            font-size: 18px;
            margin-left: 20px;
        }
        
        .cancel:hover {
            color: red;
            text-decoration: underline;
        }
        
        .save:hover {
            color: green;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div class="top">
        <div class="top-left">
            <img src="img/logo.png" alt="" class="SKECHER" style="cursor: pointer;">
            <ul class="top-list">
                <li class="man">男子</li>
                <li class="woman">女子</li>
                <li class="children">儿童</li>
                <li class="newgood">新品抢鲜</li>
                <li class="type">系列</li>
                <li class="common">明星同款</li>
            </ul>
        </div>
        <div class="top-right">
            <div class="right-search">
                <input type="text" name="" id="search" placeholder="搜索">
                <div class="search-con"></div>
            </div>
            <div class="top-login">
                <div class="login-icon"></div>
                <span class="login"> <span class="gocenter">登录</span> |<span class="trycenter">注册</span></span>
            </div>
            <div class="top-shop">
                <div class="shop-icon">
                    <div class="red-con">0</div>
                </div>
                <span class="shop">购物车</span>
            </div>

        </div>
    </div>
    <div class="top-banner1" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>BARREL合作款</li>
                    <li>JEREMYVILLE联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>上衣/T恤</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/1l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner2" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>美少女联名款</li>
                    <li>吾皇联名款</li>
                    <li>FELIX猫联名款</li>
                    <li>横冲直撞20岁</li>
                    <li>BARREL合作款</li>
                    <li>HELLOKITTY联名款</li>
                    <li>JEREMYVILLE联名款</li>
                    <li>RICOSTRU联名款</li>
                </ul>
            </div>
            <div class="middle">
                <p>鞋类</p>
                <ul>
                    <li>时尚运动鞋</li>
                    <li>休闲运动鞋</li>
                    <li>跑步鞋</li>
                    <li>健步鞋</li>
                    <li>休闲鞋</li>
                    <li>凉鞋</li>
                </ul>
            </div>
            <div class="right">
                <p>服饰</p>
                <ul>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>运动内衣</li>
                    <li>上衣/T恤</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/2l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner3" id="template">
        <div class="banner-left">
            <div class="left">
                <p>最新活动</p>
                <ul>
                    <li>最新上市</li>
                    <li>汪汪队</li>
                </ul>
            </div>
            <div class="middle">
                <p>男童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>
            <div class="right">
                <p>女童</p>
                <ul>
                    <li>运动鞋</li>
                    <li>休闲鞋</li>
                    <li>闪灯鞋</li>
                    <li>凉鞋</li>
                    <li>上衣/T恤</li>
                    <li>连帽衫/卫衣</li>
                    <li>外套/夹克</li>
                    <li>连衣裙/半身裙</li>
                    <li>长裤/紧身裤</li>
                    <li>短裤</li>
                    <li>袜子</li>
                    <li>配件/装备</li>
                </ul>
            </div>

        </div>
        <div class="banner-right">
            <p>精选系列</p>
            <img src="img/3l.jpg" alt="">
            <a href="" style="color:#474747">查看详情 &gt;</a>
        </div>
    </div>
    <div class="top-banner4" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/mp1.jpg"" alt="">
                </dt>
                <dd>D'LITES系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp2.jpg" alt=""></dt>
                <dd>MARK NASON系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp3.jpg" alt=""></dt>
                <dd>ON THE GO系列 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp4.jpg" alt=""></dt>
                <dd>GO RUN系列&gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/mp5.jpg" alt=""></dt>
                <dd>BOBS系列 &gt;</dd>
            </dl>
        </div>
        <a href="" class="more">查看更多系列 &gt;</a>
    </div>
    <div class="top-banner5" id="template">
        <div class="bannertype">
            <dl>
                <dt>
                    <img src="img/star4.jpg" alt="">
                </dt>
                <dd>唐嫣 &gt;</dd>
            </dl>
            <dl>
                <dt><img src="img/star3.jpg" alt=""></dt>
                <dd>吴尊&gt;</dd>
            </dl>
        </div>
    </div>
    <div class="content">
        <div class="content-con">
            <div class="title "><span></span><span>&nbsp;购物车</span></div>
            <div class="cartleft">
                <form action="">
                    <div class="ordermessage">
                        <p class="ordertitle">收货信息</p>
                        <div class="ordercontent">
                            <p>
                                <input type="text" placeholder="收货人*：" id="consignee">
                                <input type="text" placeholder="手机号码*：" id="phonenumber">
                            </p>
                            <p>
                                <select name="" id="province">
                               
                            </select>
                                <select name="" id="city">
                                 
                            </select>
                                <select name="" id="area">
                                  
                            </select>
                            </p>
                            <p>
                                <input type="text" placeholder="详细地址*" id="orderaddress">
                            </p>
                            <p style="float: right;">
                                <span class="save">保存</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span class="cancel">取消</span>
                            </p>

                        </div>

                    </div>
                </form>
                <div class="cartright">
                    <h3>小结信息</h3>
                    <p><span class="count"></span></p>
                    <div class="ordertext">

                        <p class="englishname"></p>
                        <p class="chinesename"></p>
                        <p class="price"></p>
                        <p class="number"></p>
                        <p class="color"></p>
                        <p class="selectsize"></p>
                    </div>
                    <div class="paydetail">

                        <p>商品总额<span class="price"></span></p>
                        <p>运费金额<span style="float: right;" class="express"></span></p>
                    </div>
                    <h2>支付总额<span class="counttotal"></span></h2>
                    <button class="order">提交订单</button>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="bottom ">
            <div class="btop ">
                <div class="top-list ">
                    <span><i>会员</i></span>
                    <span><i>门店</i></span>
                </div>
            </div>
            <div class="middle ">
                <div class="copy ">
                    <span>我们的支付方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <img src="../img/wechatpay_pc.png " alt=" " >&nbsp;&nbsp;
                    <img src="../img/alipay_pc.png " alt=" ">&nbsp;&nbsp;
                    <img src="../img/unionpay_pc.png " alt=" ">&nbsp;&nbsp;
                </span>
                </div>
                <div class="china "><img src="../img/cn.png " alt=" ">&nbsp;&nbsp;中国</div>
            </div>
            <div class="lastmessage ">
                <div class="lastL ">
                    <ul>
                        <b>联系客服</b>
                        <li>团购申请</li>
                        <li>在线客服</li>
                        <li>网站地图</li>
                    </ul>
                    <ul>
                        <b>我的账户</b>
                        <li>会员权利</li>
                        <li>我的信息</li>
                        <li>我的订单</li>
                        <li>我的积分</li>
                        <li>我的优惠券</li>
                        <li>收件地址</li>
                    </ul>
                    <ul>
                        <b>帮助中心</b>
                        <li>订单异常</li>
                        <li>发票</li>
                        <li>支付方式</li>
                        <li>退货说明</li>
                        <li>找回密码</li>
                        <li>注册与登录</li>
                    </ul>
                    <ul>
                        <b>关于斯凯奇</b>
                        <li>斯凯奇故事</li>
                        <li>联系我们</li>
                        <li>免责声明</li>
                        <li>隐私保护</li>
                        <li>服务协议</li>
                        <li>投资关系</li>
                        <li>招贤纳士</li>
                    </ul>
                </div>
                <div class="lastR ">
                    <b>关注我们</b>
                    <p class="wechat "><img src="../img/weibo.png " alt=" "><img src="../img/wechat.png " alt=" ">
                        <img src="../img/QRCode.jpg " alt=" " class="code " id="template"></p>
                    <i>获取斯凯奇最新资讯</i>
                    <div class="email "> <input type="email "> <em></em></div>
                </div>
            </div>
        </div>
        <div class="footer ">
            <div class="footer-con ">
                <div class="footL ">
                    <p>广州市利德丹贸易有限公司保留所有权利</p>
                    <p><span style="color:#002b57 ">粤ICP备12085615号-1 </span>&copy; 2018 SKECHERS,INC</p>
                </div>
                <div class="footR ">
                    <img src="../img/pc_kx.png " alt=" ">
                    <img src="../img/pc_cx.png " alt=" ">
                    <img src="../img/pc_ga.png " alt=" ">
                    <img src="../img/pc_zzN.png " alt=" ">
                </div>

            </div>
        </div>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/common.js"></script>
        <script src=lib/citys.js></script>
        <script>
            $(".chinesename").html(localStorage.getItem("chinesename"))
            $(".englishname").html(localStorage.getItem('englishname'))
            let price = $(".price").html(localStorage.getItem("price"))
            let count = $("number").html(`数量：${localStorage.getItem("number")}`)
            $(".selectsize").html(`尺码:${localStorage.getItem("selectsize")}`)
            $(".number").html(`数量：${localStorage.getItem("num")}`)
            $(".color").html(`颜色：${localStorage.getItem("color")}`)
            $(".price").html(`价格：${localStorage.getItem("price")}`)
            if (localStorage.getItem("goodslength") == null) {
                $('.count').html("没有商品")
            } else {
                $(".count").html(`${localStorage.getItem("goodslength")}件商品`)
            }
            let total = price * count
            let express = price * count * 0.01
            let totalprice = total + express
                // console.log(total)
                // $(".express").html(express)
                // $(".paydetail .price").html(total)
            $(".paydetail .price").html(localStorage.getItem("total"))
            $(".express").html(localStorage.getItem("express"))
            $(".counttotal").html(localStorage.getItem('totalprice'))
            let goodsid = sessionStorage.getItem("goodsid")
            let userid = sessionStorage.getItem("userid ")
            $("#consignee").val(localStorage.getItem("consignee"))
            $("#phonenumber").val(localStorage.getItem("phonenumber"))
            $("#orderaddress").val(localStorage.getItem("orderaddress"))
            $("#province").val(localStorage.getItem("province"))
            $("#city").val(localStorage.getItem("city"))
            $("#area").val(localStorage.getItem("area"))
            $(".title").click(function() {
                location.href = `${address}/goodsdetail.html`
            })
            $("#consignee").blur(function() {
                $(this)[0].setAttribute("placeholder", "必填字段")
            })
            $("#phonenumber").blur(function() {
                $(this)[0].setAttribute("placeholder", "必填字段")
            })
            $(".save").click(function() {
                if ($("#consignee").val() && ($("#phonenumber").val()) && ($("#orderaddress").val())) {
                    localStorage.setItem("consignee", $("#consignee").val())
                    localStorage.setItem("phonenumber", $("#phonenumber").val())
                    localStorage.setItem("orderaddress", $("#orderaddress").val())
                    localStorage.setItem("province", $("#province").val())
                    localStorage.setItem("city", $("#city").val())
                    localStorage.setItem("area", $("#area").val())
                    alert("收件人信息保存成功")
                    localStorage.getItem("consignee")
                    localStorage.getItem("phonenumber")
                    localStorage.getItem("orderaddress")
                    localStorage.getItem("city")
                    localStorage.getItem("area")

                } else {
                    alert("请填写完整信息")
                }
            })
            let phonenumber = document.getElementById("phonenumber")
            phonenumber.onblur = function() {
                let text = phonenumber.value
                let reg = /^(\+86)?1\d{10}$/;
                if (reg.test(text)) {
                    this.style.border = "2px solid green"

                } else {
                    phonenumber.value = ""
                    this.setAttribute("placeholder", "请输入一个有效的电话号码.")
                    this.style.border = "2px solid red"
                }
                if (text == "") {
                    this.setAttribute("placeholder", "必填字段")
                    this.style.border = "2px solid red"
                }
            }
            $('.cancel').click(function() {
                $("#consignee").val("") && ($("#phonenumber").val("")) && ($("#orderaddress").val(""))
                location.href = `${address}/host.html`
            })
            $(".order").click(function() {
                if ($("#consignee").val() && ($("#phonenumber").val()) && ($("#orderaddress").val())) {
                    alert("订单提交成功，您的订单正马不停蹄地奔向您，请耐心等候")
                } else {
                    alert("请先填写收货人地址哦")
                }
            })
        </script>
</body>

</html>